<template>
  <view style="">
    <uni-forms
      :border="true"
      ref="valiForm"
      :rules="data.rules"
      :modelValue="data.valiFormData"
    >
      <uni-forms-item name="name">
        <uni-easyinput
          :inputBorder="false"
          v-model="data.valiFormData.name"
          placeholder="请输入登录账号"
        />
      </uni-forms-item>
      <uni-forms-item name="age">
        <uni-easyinput
          type="password"
          :inputBorder="false"
          :clearable="false"
          v-model="data.valiFormData.age"
          placeholder="请输入密码"
        >
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>
    <button class="brn" @click="submit">提交</button>
  </view>
</template>

<script lang="ts" setup>
import {
  onMounted,
  ref,
  reactive,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
const data = reactive({
  // 校验表单数据

  valiFormData: {
    name: "",
    age: "",
    introduction: "",
  },
  rules: {
    name: {
      rules: [
        {
          required: true,
          errorMessage: "账号不能为空",
        },
      ],
    },
    age: {
      rules: [
        {
          required: true,
          errorMessage: "密码不能为空",
        },
      ],
    },
  },
});
const valiForm = ref<HTMLFormElement | null>(null);
const submit = () => {
  console.log(valiForm.value);

  valiForm
    .value!.validate()
    .then((res: any) => {
      console.log("success", res);
      uni.showToast({
        title: `校验通过`,
      });
    })
    .catch((err: any) => {
      console.log("err", err);
    });
};
</script>

<style lang="scss" scoped>
::v-deep .is-input-border {
  border: 0 !important;
}

::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);
}

::v-deep .uni-forms-item .is-required {
  display: none;
}
</style>
